<template>
    <section class="cms-body" v-loading="loading">
        <!-- 返回组件 -->
        <cms-back></cms-back>
        <el-form ref="form" :model="dataInfo" :rules="rules" class="cms-form" label-width="162px">

            <el-form-item label="资源名称" class="flex-50" prop="resourceName">
                <el-input :disabled="true" v-model="dataInfo.resourceInfo.resourceName" class="cms-width"
                          :maxlength="20"></el-input>
            </el-form-item>

            <el-form-item label="资源类型" class="flex-50" prop="resourceType">
                <el-input :disabled="true" v-model="dataInfo.resourceInfo.resourceType.typeName"
                          class="cms-width" :maxlength="20"></el-input>
            </el-form-item>

	        <el-form-item label="资源学科" class="flex-50" prop="resourceType">
		        <el-input :disabled="true" v-model="dataInfo.resourceInfo.resourceSubject.subjectName"
		                  class="cms-width" :maxlength="20"></el-input>
	        </el-form-item>

	        <el-form-item label="资源专业" class="flex-50" prop="resourceType">
		        <el-input :disabled="true" v-model="dataInfo.resourceInfo.resourceMajor.majorName"
		                  class="cms-width" :maxlength="20"></el-input>
	        </el-form-item>

	        <el-form-item label="资源格式" class="flex-50" prop="resourceType">
		        <el-input :disabled="true" v-model="dataInfo.resourceInfo.resourceFormat.formatName"
		                  class="cms-width" :maxlength="20"></el-input>
	        </el-form-item>

            <el-form-item label="状态" class="flex-50" prop="status">
                <el-switch :disabled="true"
                           v-model="dataInfo.resourceInfo.status"
                           active-color="#13ce66"
                           inactive-color="#ff4949"
                           active-value="1"
                           inactive-value="0" @change="changeUpdate()"
                >
                </el-switch>
            </el-form-item>

            <el-form-item label="附件" class="flex-50" prop="enclosure">
                <a v-if="enclosureType=='bin'" @click="down(enclosure[0].path)">
                    {{ enclosure[0].name }}
                </a>
                <img v-if="enclosureType=='img'" style="height: 250px" :src=baseUrl+enclosure[0].path
                     :alt=enclosure[0].name>
                <a v-if="enclosureType=='img'" @click="down(enclosure[0].path)">
                    点击下载
                </a>
                <video v-if="enclosureType=='mp4'" controls="" autoplay="" name="media" style="height: 250px">
                    <source :src="baseUrl+enclosure[0].path" type="audio/mpeg">
                </video>
            </el-form-item>
            <el-form-item class="flex-50" prop="phoneNum">
            </el-form-item>

            <el-form-item label="说明信息" class="flex-50">
                <el-input
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 8}"
                        placeholder="请输入内容"
                        v-model="applyData.backText">
                </el-input>
            </el-form-item>

            <div class="form-footer">
                <el-button type="success" round @click="update(true)">通过</el-button>
                <el-button type="danger" round @click="update(false)">驳回</el-button>
            </div>
        </el-form>

    </section>
</template>

<script>
    import listMixins from '@/mixins/form';
    import axios from "axios";
    import va from "@/rules";

    export default {
        mixins: [listMixins],
        data() {
            let required = va.required();

            return {
                enclosure: [],
                enclosureType: 'bin',
                baseUrl: '',
                resourceTypeGroup: [],
                rules: {
                    //校验规则
                    resourceName: [required],
                    enclosure: [required],
                    resourceStatus: [required],
                    status: [required],
                    resourceType: [required]
                },
                applyData: {
                    id: 0,
                    backText: '',
                    applyStatus: 0,
                },
                dataInfo: {
                    resourceInfo: {
                        resourceName:''
                    },
                    resourceTypeManage:{
                        contentType:''
                    }
                }
            };
        },
        methods: {

            getDataInfo(id) {
                this.applyData.id = id
                this.enclosure = [];
                if (id != 0) {
                    this.loading = true;
                    axios.post(this.$api.resourceVerifyGet, {id: id}).then(res => {
                        this.loading = false;
                        if (res.code == '200') {
                            this.dataInfo = res.body;
                            if (this.dataInfo.resourceInfo.resourceUrl.trim() != '') {
                                let tmp = {
                                    name: this.dataInfo.resourceInfo.fileName,
                                    path: this.dataInfo.resourceInfo.resourceUrl
                                };
                                this.enclosure.push(tmp);
                                if ((this.dataInfo.resourceInfo.resourceUrl.lastIndexOf('.jpg') != -1) || this.dataInfo.resourceInfo.resourceUrl.lastIndexOf('.jpeg') != -1 || this.dataInfo.resourceInfo.resourceUrl.lastIndexOf('.bmp') != -1 || this.dataInfo.resourceInfo.resourceUrl.lastIndexOf('.png') != -1 || this.dataInfo.resourceInfo.resourceUrl.lastIndexOf('.gif') != -1) {
                                    this.enclosureType = 'img'
                                }
                                if (this.dataInfo.resourceInfo.resourceUrl.lastIndexOf('.mp4') != -1 || this.dataInfo.resourceInfo.resourceUrl.lastIndexOf('.mp3') != -1) {
                                    this.enclosureType = 'mp4'
                                }
                                console.log(this.dataInfo.resourceInfo.resourceUrl.lastIndexOf('.mp4'))
                                this.baseUrl = this.$store.state.sys.baseUrl
                            }
                            if (id == 0) {
                                this.rules.teacherName = [va.required()];
                                this.rules.appKey = [va.required()];
                            }
                        }

                    }).catch(error => {
                        this.loading = false;
                    })
                } else {
                    this.dataInfo.resourceInfo.resourceName = "";
                    this.dataInfo.resourceType = "";
                    this.dataInfo.resourceStatus = "1";
                    this.dataInfo.status = "1";
                    this.enclosure = [];
                    this.loading = false;
                }

            },
            update(b) {
                if (b) {
                    this.applyData.applyStatus = 1;
                } else {
                    this.applyData.applyStatus = 0;
                }
                this.applyDataInfo(this.$api.resourceVerifyApply, this.applyData, "list");
            },
            getAttachments(res) {
                this.enclosure = res;//附件对象数组
            },
            changeUpdate() {
                this.$forceUpdate();
            },
            getResourceTypeGroup() {

                this.loading = true;
                axios.post(this.$api.resourceTypeManageGroup).then(res => {
                    this.loading = false;
                    if (res.code == '200') {
                        this.resourceTypeGroup = res.body;
                    }
                }).catch(error => {
                    this.loading = false;
                })

            },
            down(val) {
                //下载
                let link = this.$store.state.sys.baseUrl + val;
                var a = document.createElement("a");
                a.href = link;
                a.click();
            }
        },
        created() {
            //初始获取数据
            this.getDataInfo(this.id);
        }
    };
</script>


<style>
    .el-input.is-disabled .el-input__inner {
        color: #000000;
    }
</style>

